<template>
  <div class="home">
    <button @click="onClikc" class="home_button_container">
      点击跳转到购物车
    </button>
    <conter class="heder_contet_container"></conter>
    <TabBar >
      <TabFooter :icon="require('../assets/首页.png')">首页</TabFooter>
      <TabFooter :icon="require('../assets/分类.png')">分类</TabFooter>
      <TabFooter :icon="require('../assets/购物车.png')">购物车</TabFooter>
      <TabFooter :icon="require('../assets/我的.png')">我的</TabFooter>
    </TabBar>
  </div>
</template>
<script>
import TabBar from "../components/tabBar";
import conter from "../components/conter";
import TabFooter from "../components/tabFooter";
export default {
  components: {
    TabBar,
    conter,
    TabFooter,
  },
  methods: {
    onClikc() {
      this.$router.push({ path: "/About" });
    },
  },
};
</script>
<style>
.home {
  width: 100%;
  height: 100vh;
}
.home_button_container {
  width: 100%;
  height: 10vh;
  background-color: darkslateblue;
}
.heder_contet_container {
  width: 100%;
 
}
</style>
